<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/prop-types/15.8.1/prop-types.js"></script>
    <title>Document</title>
    <style>
        div {
            position: relative;
        }
    </style>
</head>

<body>
    <div id="app" style="width: 500px; margin: 0 auto"></div>
    <input type="file" id="inp">
    <script>
        inp.addEventListener('change', (e) => {
            console.log(e);
        })
    </script>
    <script type="text/babel">
        // import { Component } from 'react';
        // 1、
        // /**
        //  * 用数组的 filter, map, reduce 方法对以下数据做处理，使得输出结果为 '256'
        //  * const ary = [{a: 6}, {a: 1}, {a: 5}, {a: 2}];
        //  *
        //  * @param ary
        //  */
        const filter = (arr) => {
            const result = arr.filter(item => item.a >= 2).sort((a, b) => a.a - b.a).map(i => i.a).join('')

            console.log(result);
        }
        filter([{ a: 6 }, { a: 1 }, { a: 5 }, { a: 2 }])

        // 2、 实现一个 memorize 方法，记忆函数上次运行的结果，使得连续两次调用，如果参数相同，则返回上次的执行结果，不执行函数体；如果参数不同，则执行。函数参数限1个。
        // const arg = []//{label:str   result:}
        function memorize(fn) {
            const sz = {};
            console.log('sz:', sz);
            return (name) => {
                if (!sz.hasOwnProperty(name)) {
                    sz[name] = fn(name);
                    return sz[name];
                } else {
                    return sz[name];
                }
            };
        }
        // 使用示例：
        //
        const sayHello = memorize((name) => {
            console.log(`hello, ${name}`);
            return `hello, ${name}`;
        });

        sayHello('A'); // 首次执行，打印 "hello A", 返回 "hello A"
        sayHello('A'); // 第二次执行，不打印直接返回 "hello A"
        //
        // 3、使用React，实现如下组件，完成 React 组件封装，并且不失input原生组件能力, 不能使用原生maxLength
        // 注意组件的 defaultValue 功能，以及 value 受控模式的展示
        // | API          | 描述                     | 类型                   |
        // | ------------ | ------------------------ | ---------------------- |
        // | value        | 当前的 value 值          | string                 |
        // | defaultValue | 初始化的 value 值        | string                 |
        // | onChange     | 发生改变的时候触发的回调 | Function(value, event) |
        // | maxLength    | 最大长度                 | Number                 |



        // // 组件支持输入以下 props 
        // MyInput.propTypes = { 
        //     maxLength: PropTypes.number.isRequired, 
        // }
        class MyInput extends React.Component {
            constructor(props) {
                super(props);
                const { value, defaultValue, onChange, maxLength } = this.props;
                this.handleStrLength = (str, maxLength) => {
                    return str.length > maxLength ? str.slice(0, maxLength) : str;
                };
                this.state = {
                    value: this.handleStrLength(defaultValue || value || '', maxLength),
                    maxLength,
                };
                this.changeHandler = (e) => {
                    const value = e.target.value.trim();
                    this.setState({
                        value: this.handleStrLength(value, maxLength),
                    });

                    this.props.onChange && this.props.onChange(value);
                    console.log('1111', this.props, value);
                };
            }

            render() {
                const { value, maxLength } = this.state;
                return (
                    <div style={{ position: 'relative' }}>
                        <input
                            type="text"
                            ref="ipt"
                            value={value}
                            onChange={this.changeHandler}
                            style={{ width: '100%' }}
                        />
                        <div style={{ position: 'absolute', top: 0, right: 0 }}>
                            {value.length} / {maxLength}
                        </div>
                    </div>
                );
            }
        }
        MyInput.defaultProps = {
            maxLength: 10,
            defaultValue: '1111111111111111111111111111111111'
        }
        ReactDOM.render(<MyInput />, document.getElementById("app"));

        // 4
        // 给定一个 js 资源数组，示例 http://test.com/demo1.js, https://test.com/demo2.js, //test.com/demo3.js
        // 要求输出是整齐划一的 https://xxx/xxx 的格式
        function resourceProcess(jsArray) {
            return jsArray.map(item => {
                let result = 'https://'
                if (item.indexOf('//') > -1) {
                    result += item.split('//')[1]
                } else {
                    result += item
                }
                return result
            })
        }
        const arr4 = ['http://test.com/demo1.js', 'https://test.com/demo2.js', '//test.com/demo3.js']
        console.log(resourceProcess(arr4));
    </script>
</body>

</html>
<script>
    const p1 = Promise.resolve('p1')

    const p2 = new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve('p2 延时一秒')
        }, 1000)
    })

    const p3 = new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve('p3 延时两秒')
        }, 2000)
    })

    const p4 = Promise.reject('p4 rejected')

    const p5 = new Promise((resolve, reject) => {
        setTimeout(() => {
            reject('p5 rejected 延时1.5秒')
        }, 1500)
    })

    // // 所有Promise实例都成功
    // Promise.all([p1, p2, p3])
    //     .then(res => {
    //         console.log(res)
    //     })
    //     .catch(err => console.log(err)) // 2秒后打印 [ 'p1', 'p2 延时一秒', 'p3 延时两秒' ]

    // // 一个Promise实例失败
    // Promise.all([p1, p2, p4])
    //     .then(res => {
    //         console.log(res)
    //     })
    //     .catch(err => console.log(err)) // p4 rejected

    // // 一个延时失败的Promise
    // Promise.all([p1, p2, p5])
    //     .then(res => {
    //         console.log(res)
    //     })
    //     .catch(err => console.log(err)) // 1.5秒后打印 p5 rejected

    // // 两个Promise实例失败
    // Promise.all([p1, p4, p5])
    //     .then(res => {
    //         console.log(res)
    //     })
    //     .catch(err => console.log(err)) // p4 rejected



</script>
<script>
    Promise.MyRace = function (promises) {
        return new Promise((resolve, reject) => {
            // 这里不需要使用索引，只要能循环出每一项就行
            for (const item of promises) {
                Promise.resolve(item).then(resolve, reject)
            }
        })
    }

    // p1无延时，p2延时1s，p3延时2s
    Promise.MyRace([p1, p2, p3])
        .then(res => console.log(res))
        .catch(err => console.log(err)) // p1

    // p4无延时reject
    Promise.MyRace([p4, p2, p3])
        .then(res => console.log(res))
        .catch(err => console.log(err)) // p4 rejected

    // p5 延时1.5秒reject，p2延时1s
    Promise.MyRace([p5, p2, p3])
        .then(res => console.log(res))
        .catch(err => console.log(err)) // 1s后打印: p2 延时一秒

    const aaa = new Error('111')
    console.log(aaa);
</script>
<script>
    const promise1 = new Promise((resolve, reject) => {
        console.log('promise1')
    })
    console.log('1', promise1, 'a' == 'A');

</script>
<script>
    [1, 2, 3, 4].forEach((item, index, arr) => {
        console.log(item, index, arr);
    });


    const aaaaaa = [1, 2, 3, 4, 5].reduce((pre, item) => {
        pre += item
        return pre
    })
    console.log(aaaaaa);



</script>